<template lang="pug">
  .order-center(v-if='getOrderData')
    el-dialog(
      title="用户中心",
      :visible.sync="showModal",
      top="10vh",
      width="45%",
      :before-close="beforeCloseHandler")
      el-tabs(v-model="activeName", @tab-click="handleTabSwitch", v-loading="loading")
        el-tab-pane(label="已付款订单", name="orderlist")
          OrderList(v-if='getOrderData', :data="getOrderData", @handleRate="handleRate")

        el-tab-pane(label="我的红包", name="welfare")
          h3.record-title.tac 领取记录
          ul.record-list(v-if='getUserWelfare')
            li.record-item.clearfix(v-for="item in getUserWelfare")
              .icon
                img(:src="baseUrl + item.logo")
              .title.omit {{item.title}}
              .money ￥ {{item.money}}
              .time {{item.addtime | formatTime}}

      span.dialog-footer(slot="footer")
        el-pagination(
          small,
          background,
          layout="prev, pager, next",
          @current-change="handleChangePage",
          :current-page="getCurrentPage",
          :total="getPageCount")
        el-button(size="small", @click="closeModal") 取 消
    Rating(:data="orderData", ref="rating")
</template>

<script>
import Rating from '@/components/Rating/pc'
import OrderList from '@/components/OrderList'
import modalMixin from '@/mixins/modal'
import { mapGetters } from 'vuex'

export default {
  name: 'userCenterModal',
  mixins: [modalMixin],
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      showModal: false,
      loading: false,
      activeName: 'orderlist',
      orderList: [],
      recordData: null,
      tabMenu: ['已付款订单', '我的红包'], //['全部', '待收货', '待评价', '待付款']
      tabIndex: 0,
      OrderPageCount: null,
      WelfarePageCount: null,
      OrderCurrentPage: 1,
      WelfareCurrentPage: 1
    }
  },
  mounted() {
    this.$vgo.on('order:usercenter', () => {
      this.openModal()
    })
  },
  computed: {
    ...mapGetters(['orderData', 'userWelfare']),
    getOrderData() {
      if(this.orderData) {
        return this.orderData.list
      }
    },
    getUserWelfare() {
      if(this.userWelfare) {
        return this.userWelfare.list
      }
    },
    getPageCount() {
      if (this.tabIndex == 0) {
        return this.getOrderData.length
      }else {
        return this.userWelfare ? this.userWelfare.count : 0
      }
    },
    getCurrentPage() {
      if (this.tabIndex == 0) {
        return this.OrderCurrentPage
      }else {
        return this.WelfareCurrentPage
      }
    }
  },
  methods: {
    handleChangePage(val) {
      if (this.tabIndex == 0) {
        this.OrderCurrentPage = val
        this.$store.dispatch('fetchUserOrder', val, 10)
      }else {
        this.WelfareCurrentPage = val
        this.$store.dispatch('fetchUserWelfare', val, 10)
      }
    },
    handleTabSwitch(tab, event) {
      this.tabIndex = tab.index
      if(tab.index == 1 && !this.userWelfare) {
        this.$store.dispatch('fetchUserWelfare')
      }
    },
    handleRate(data) {
      console.log(data)
      this.$refs.rating.showRating(data)
    }
  },
  filters: {
    formatTime(ns) {
      if(!ns) return
      var arr = ns.split('T')

      return `${arr[0]} ${arr[1].substr(0, 8)}`
    }
  },
  components: {
    Rating,
    OrderList
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/color.styl'
@import '../../../assets/styles/common.styl'
$white = #fff
.order-center
  background: $gray
  .el-pagination
    position: absolute
    left: 10px
    bottom: 20px
  .el-dialog__body
    padding: 0 20px
    .el-tabs__content
      min-height: 400px
      max-height: 500px
      padding-bottom: 20px
      overflow-y: auto

  .record-title
    margin: 0
    padding-bottom: 20px
    font-size: $font-size-h3
    color: $black
    border-bottom: 1px solid $gray-light
  .record-list
    .record-item
      color: $black-light
      margin-bottom: 10px
      border-bottom: 1px solid $gray-light
      &:last-child
        border-bottom: none
      & > div
        float: left
        width: 30%
        line-height: 32px
        box-sizing: border-box
      .icon
        width: 32px
        height: 32px
        img
          width: 100%
          height: 100%
      .title, .money
        padding-left: 20px
  .no-order
    p
      font-size: 18px
      color: $silver
      margin-top: 50px
      pos-x()
</style>
